<template>
  <!-- <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" /> -->
  <div class="container">
    <div class="list">
      <div v-for="item in mockData" :class="['list-item', item.expanded ? 'list-item--on': 'list-item--off']">
        <div class="list-item__info" @click="handleItem(item)">
          <p class="list-item__info-web" v-if="item.way === 'http' || item.way === 'https'">{{item.domain}}.nps.taotikee.com</p>
          <p class="list-item__info-web" v-if="item.way === 'tcp'">TCP 服务</p>
          <p class="list-item__info-web" v-if="item.way === 'udp'">UDP 服务</p>
          <p class="list-item__info-local">{{ item.inUrl}}:{{ item.inPort }}</p>
        </div>
        <div class="list-item__online">
          <div :class="[item.state ? 'list-item__online--on' : 'list-item__online--off']"></div>
        </div>
      </div>
    </div>
    <div class="form">
      <el-form ref="refForm" :model="form" label-width="120px" size="small">
        <!-- <el-form-item label="节点">
          <el-input v-model="form.name" disabled></el-input>
        </el-form-item> -->
        <el-form-item label="连接方式">
          <el-select v-model="form.way" placeholder="请选择" class="form-select">
            <el-option label="http 服务" value="http" />
            <el-option label="https 服务" value="https" />
            <el-option label="tcp 服务" value="tcp" />
            <el-option label="udp 服务" value="udp" />
          </el-select>
        </el-form-item>
        <el-form-item label="外网域名" v-if="form.way === 'http' || form.way === 'https'">
          <el-input v-model="form.domain" placeholder="写个名字">
            <template #prepend>http(s)://</template>
            <template #append>.nps.taotikee.com</template>
          </el-input>
        </el-form-item>
        <el-form-item label="内网地址">
          <el-input v-model="form.inUrl" placeholder="127.0.0.1"></el-input>
        </el-form-item>
        <el-form-item label="内网端口">
          <el-input v-model="form.inPort" placeholder="9999"></el-input>
        </el-form-item>
      </el-form>
      <div class="form-tip">
        <p v-if="form.state"  class="color-success">服务器连接成功</p>
        <p v-else  class="color-danger">服务器还未连接</p>
      </div>
      <div class="form-link" v-if="form.way === 'http' || form.way === 'https'">
        <p>
          <a href="http://fanle.nps.taotikee.com" class="color-primary">http://{{ form.domain }}.nps.taotikee.com</a>
        </p>
        <p>
          <a href="https://fanle.nps.taotikee.com" class="color-primary">https://{{ form.domain }}.nps.taotikee.com</a>
        </p>
      </div>
    </div>
  </div>
  <div class="bottom">
    <div class="bottom-fl">
      <span class="color-warning" title="添加" @click="addNpc"> + </span>
    </div>
    <div class="bottom-fr">
      <el-button type="defualt" size="small" @click="handleSetNpc">
        设置数据
      </el-button>
      <el-button type="defualt" size="small" @click="testNpc">
        测试连接
      </el-button>
      <el-button type="success" size="small" @click="handleStartNpc" :disabled="startState">
        开始连接
      </el-button>
      <el-button type="danger" size="small" @click="handleStopNpc">
        断开连接
      </el-button>
    </div>
  </div>

  <!-- <el-button type="primary" @click="handleStartNpc"> 开启 npc 服务</el-button>
  <el-button type="danger" @click="handleStopNpc"> 停止 npc 服务</el-button>
  <el-button type="default" @click="handleTest">测试 utools</el-button> -->
</template>


<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import { ref, Ref } from 'vue'

const utools = window.utools

const stopNpc = window.stopNpc
const startNpc = window.startNpc
const getNpcPid = window.getNpcPid

const refForm:Ref = ref(null)
// form
let form:any = ref({
  _id: 0,
  name:'nps.taotikee.com',
  way: 'http',
  domain: '',
  inUrl: '127.0.0.1',
  inPort: '8000',
  // 是否连接
  state: false,
  // 是否展开
  expanded: false,
  _rev: ''
})

// 模拟数据
const mockData: any = ref([])
// 按钮状态
const startState: any = ref(false)

// 获取点击 npc
const handleItem = (item: any) => {
  console.log('item', item)
  mockData.map((ele: any) => {
    ele.expanded = false
    if (item.id === ele.id) {
      ele.expanded = true
    }
  })
  form.value = mockData.value.filter((ele: any) => {
    return item.id === ele.id
  })[0]
  console.log('form', form)
}

// 设置数据
const handleSetNpc = () => {
  let data = {
    _id: '2',
    pid: '0',
    name:'nps.taotikee.com',
    way: 'https',
    domain: 'fan',
    inUrl: '127.0.0.1',
    inPort: '8000',
    state: false,
    expanded: true
  }
  utools.db.put(data)
  initMock()
  // console.log('mockData', mockData)
}

// 添加 数据
const addNpc = () => {
  let data: {} = {
    _id: Date.now() + Math.round(Math.random() * 1000),
    pid: 0,
    name:'nps.taotikee.com',
    way: 'http',
    domain: '',
    inUrl: '127.0.0.1',
    inPort: '8002',
    state: false,
    expanded: true
  }
  console.log('mockData', mockData.length)
  if (mockData.length > 3) {
    utools.showNotification(`无法添加, 目前限制为 ${mockData.length} 个`)
  } else {
    mockData.value.push(data)
    utools.db.put(data)
    handleItem(data)
  }
}

// 插件装配完成，仅进入执行一次
utools.onPluginReady(() => {
  // testNpc()
  // 获取所有数据
  console.log('getData()',  utools.db.allDocs())
  initMock()
})

// 初始化数据
const initMock = () => {
  let data = utools.db.allDocs()
  mockData.value = data
  form.value = data[0]
}

// 测试连接
const testNpc = async () => {
  console.log('getData()',  utools.db.allDocs())
  console.log('current form', {...form.value})
  // startNpc()
  // getNpcPid(form.value)
  // setTimeout(() => {
  //   console.log('testNpc allPid', allPid)
  // },1000)
}

utools.onPluginEnter((): void => {
  console.log('用户进入插件')
  // console.log('readConfig', readConfig({server: '12312312', vkey: '123123123123'}))
})

utools.onPluginOut(() => {
  console.log('用户退出插件')
  utools.db.put(Object.assign({...form.value}, {
    state: false,
    pid: '0'
  }))
})



const handleStartNpc = () => {
  // form.id = Date.now() + Math.round(Math.random() * 1000)
  // console.log('form', form)
  // let data = {
  //   domain: 'fan',
  //   _id: '1636186015722',
  //   inPort: '8000',
  //   inUrl: '127.0.0.1',
  //   name: 'nps.taotikee.com',
  //   way: 'http',
  // }
  // console.log('data', data)
  // // saveData(data)
  // utools.db.put(data)
  // let data = {
  //   _id: form.value._id,
  //   name:'nps.taotikee.com',
  //   way: form.value.way,
  //   domain: form.value.domain,
  //   inUrl: form.value.inUrl,
  //   inPort: form.value.inPort,
  // }
  // if (form.value._rev) {
  //   data._rev = form.value._rev
  // }
  console.log('form', {...form.value})
  // startState.value = true
  stopNpc()
  setTimeout(() => {
    startNpc()
    getNpcPid({...form.value})
  },1000)
  setTimeout(() => {
    initMock()
  },5000)
}
const handleStopNpc = () => {
  // stopNpcUninstall()
  // let data = {
  //   _id: form.value._id,
  //   name:'nps.taotikee.com',
  //   way: form.value.way,
  //   domain: form.value.domain,
  //   inUrl: form.value.inUrl,
  //   inPort: form.value.inPort,
  // }
  // if (form.value._rev) {
  //   data._rev = form.value._rev
  // }
  stopNpc({...form})
  // resetNpc()
}

const handleTestNpc = () => {
  console.log('getData()',  utools.db.allDocs())
}

const handleTest = () => {
  console.log('utools 下载路径', utools.getPath('downloads'))
  let res = utools.showSaveDialog({ 
    title: '保存位置', 
    defaultPath: utools.getPath('downloads'),
    buttonLabel: '保存'
  })
  console.log('res', res)
}

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 16px;
}
p {
  margin: 0;
}
.color-warning {
  color: #E6A23C;
}
.color-danger {
  color: #F56C6C;
}
.color-primary {
  color: #409EFF;
}
.color-success {
  color: #67C23A;
}
.container {
  display: flex;
  height: 472px;
  border-bottom: 1px solid rgb(218, 215, 215);
}
.list { 
  width: 28%;
  border-right: 1px solid rgb(219, 219, 219);
}
.list-item {
  position: relative;
  display: flex;
  padding: 10px 4px 10px 8px;
  background-color: rgba(129, 185, 199, 0.326);
  cursor: pointer;
  /* border-bottom: 4px solid #fff; */
  margin-bottom: 4px;
  transition: all .1s linear;
}
.list-item--on{
  /* content: '';
  position: absolute;
  right: -1px;
  top: 0;
  width: 1px;
  height: 100%;
  border-right: 1px solid #fff;
  border-bottom: 4px solid #fff; */
  transform: translateX(2px);
}
/* .list-item--on::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 0;
  width: 1px;
  height: 100%;
  border-right: 1px solid #fff;
  border-bottom: 4px solid #fff;
} */
.list-item__info {
  width: 80%;
  /* background-color: #ccc; */
}
.list-item__info-web {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 4px;
}
.list-item__info-local {
  font-size: 12px;
  font-style: italic;
}
.list-item__online {
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.list-item__online--on {
  width: 6px;
  height: 6px;
  background-color: #67C23A;
  border-radius: 50%;
}
.list-item__online--off {
  width: 6px;
  height: 6px;
  background-color: #ccc;
  border-radius: 50%;
}

.form {
  margin-top: 24px;
}
.form-tip {
  font-size: 24px;
  margin: 10px 0 30px 50px;
}
.form-link {
  margin: 0 0 10px 50px;
}
.form-link p{
  margin-bottom: 10px;
}
.bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.bottom-fl {
  margin-top: -4px;
  font-size: 30px;
  cursor: pointer;
}
::v-deep .el-select {
  display: block;
}
</style>
